<template>
    <u-navbar title="线路" :is-back="false" title-color="black" title-size="16rpx"></u-navbar>
    <view class="line-page" :style="pageStyle">
        <!-- 搜索框 -->
        <w-search
            placeholder="目的地"
            v-model="searchKeyword"
            :styles="{ margin: '20rpx' }"
            :is-fixed="true"
        />

        <!-- 标签选择 -->
        <view class="route-tabs">
            <text
                v-for="(tab, index) in tabs"
                :key="index"
                :class="['tab-item', { active: activeTab === tab.name }]"
                @click="switchTab(tab.name)"
                >{{ tab.name }}
            </text>
        </view>

        <!-- 线路列表 -->
        <scroll-view scroll-y style="height: 100vh" @scroll="handleScroll">
            <view class="route-list">
                <template v-if="routes.length">
                    <view v-for="route in routes" :key="route.id">
                        <view class="route-item" @click="viewDetail(route.id)">
                            <image :src="route.line_image" class="route-image" mode="aspectFill" />
                            <view class="route-info">
                                <text class="route-title">{{ route.title }}</text>
                                <view class="tags_view">
                                    <view
                                        class="route-tags"
                                        v-if="route.tags && route.tags.length > 0"
                                    >
                                        <text v-for="tag in route.tags" :key="tag" class="route-tag"
                                            >{{ tag }}
                                        </text>
                                    </view>
                                </view>
                                <view class="route-desc">
                                    <text class="price-value">￥{{ route.price }}</text>
                                    <text class="price-unit">起/人</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="no-result">没有符合条件的线路</view>
                </template>
            </view>
        </scroll-view>
        <tabbar />
        <!-- 返回顶部按钮 -->
        <u-back-top
            :scroll-top="scrollTop"
            :top="100"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        />
    </view>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
import Tabbar from '@/components/tabbar/tabbar.vue'
import { getLineList } from '@/api/lines'
import { getHotSearch } from '@/api/shop'

// 状态管理
const searchKeyword = ref('')
const scrollTop = ref(0)

// 标签数据
const tabs = ref<any[]>([])
const activeTab = ref('')
const getTabs = async () => {
    try {
        const data = await getHotSearch()
        tabs.value = data.data
        if (tabs.value.length > 0) {
            activeTab.value = tabs.value[0].name // 设置默认选中第一个标签
            await getLines() // 立即加载线路数据
        }
    } catch (error) {
        console.error('获取标签数据失败:', error)
        // 可选：提示用户或进行其他错误处理
    }
}

// 切换标签
const switchTab = async (tabName: string) => {
    activeTab.value = tabName
    await getLines() // 切换标签时重新加载线路
}
const routes = ref<any[]>([])

const getLines = async () => {
    try {
        const data = await getLineList({
            page_no: 1,
            page_size: 10,
            keyword: activeTab.value // 使用当前选中标签名称作为搜索词
        })
        const data_list = data.lists || []
        data_list.forEach((item: any) => {
            if (item.tags != '' && item.tags != null) {
                item.tags = item.tags.split(',')
            }
        })
        routes.value = data_list
    } catch (error) {
        console.error('获取路线数据失败:', error)
        routes.value = []
    }
}
// 页面样式计算（复用 index.vue 中的逻辑）
const pageStyle = computed(() => {
    return {
        background: '#ffffff'
    }
})

// 查看详情
function viewDetail(routeId: number) {
    uni.navigateTo({
        url: `/pages/line_detail/line_detail?id=${routeId}`
    })
}

// 滚动事件
function handleScroll(e: any) {
    scrollTop.value = e.detail.scrollTop
}

onLoad(() => {
    getTabs()
})
</script>

<style lang="scss" scoped>
.line-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

.route-tabs {
    display: flex;
    overflow-x: auto; // 允许横向滚动
    white-space: nowrap; // 防止换行
    -webkit-overflow-scrolling: touch; // iOS 滚动优化
    padding: 20rpx 0;
    scrollbar-width: none; // 隐藏滚动条（可选）
    -ms-overflow-style: none; // 隐藏滚动条（可选）
    &::-webkit-scrollbar {
        display: none; // 隐藏浏览器滚动条（可选）
    }
}

.tab-item {
    flex-shrink: 0; // 防止标签被压缩
    font-size: 28rpx;
    color: #666;
    position: relative;
    padding: 10rpx 20rpx;

    &.active {
        color: #07c160;
        font-weight: bold;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background-color: #07c160;
        }
    }
}

.route-list {
    padding: 20rpx;
}

.route-item {
    display: flex;
    flex-direction: row; // 左右排列
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    padding: 20rpx;
    border-bottom: 1rpx solid #f1f1f1;
}

.route-image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 16rpx;
    flex-shrink: 0;
    object-fit: cover; // 图片内容覆盖整个容器（可选）
}

.route-info {
    flex: 1;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.route-title {
    overflow: hidden;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.route-desc {
    display: flex;
    align-items: baseline; // 基线对齐
    font-size: 30rpx;
    color: #f6a22d;
    margin-top: 10rpx;
    align-self: flex-end;
}

.price-value {
    font-weight: bold;
}

.price-unit {
    font-size: 16rpx;
    font-weight: lighter;
    margin-left: 4rpx; // 微调间距
}

.tags_view {
    display: flex;
    height: 60rpx;
}

.route-tags {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; // 允许横向滚动
    gap: 12rpx;
    margin: 10rpx 0;
    padding-right: 20rpx; // 防止内容贴边
    -webkit-overflow-scrolling: touch; // iOS 滚动优化
    white-space: nowrap; // 防止文字换行
    scrollbar-width: none; // 隐藏滚动条（可选）
    -ms-overflow-style: none; // 隐藏滚动条（可选
}

.route-tags::-webkit-scrollbar {
    display: none; // 隐藏浏览器滚动条
}

.route-tag {
    background-color: #fffbf6;
    flex-shrink: 0; // 防止标签被压缩
    border: 1rpx solid #fbdaab;
    color: #f6a22d;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    max-width: 180rpx; // 控制最大宽度（可选）
    overflow: hidden;
    text-overflow: ellipsis; // 超出显示省略号
}

.no-result {
    text-align: center;
    padding: 100rpx;
    color: #999;
}
</style>
